﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" media="screen" />
    <link rel="stylesheet" href="../../Styles/Site.css" media="screen" />
    <link rel="stylesheet" href="../../Styles/qunit-git.css" media="screen" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../Scripts/qunit-git.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {

             $("#jqxNavigationBar").jqxNavigationBar({ width: '400px', height: '420px'});
             $("#jqxNavigationBar").css('visibility', 'hidden');
             module("Module Properties");

             test("expandAnimationDuration property test", function () {
                 // get expandAnimationDuration.
                 var expandAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('expandAnimationDuration');
                 ok(expandAnimationDuration == 350, "get expandAnimationDuration test.");

                 // set expandAnimationDuration.
                 $('#jqxNavigationBar').jqxNavigationBar({ expandAnimationDuration: 500 });
                 var expandAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('expandAnimationDuration');
                 ok(expandAnimationDuration == 500, "set expandAnimationDuration test.");
             });

             test("collapseAnimationDuration property test", function () {
                 // get collapseAnimationDuration
                 var collapseAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('collapseAnimationDuration');
                 ok(collapseAnimationDuration == 350, "get collapseAnimationDuration test.");

                 // set collapseAnimationDuration.
                 $('#jqxNavigationBar').jqxNavigationBar({ collapseAnimationDuration: 500 });
                 var collapseAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('collapseAnimationDuration');
                 ok(collapseAnimationDuration == 500, "set collapseAnimationDuration test.");

             });

             test("disabled property test", function () {
                 // get disabled
                 var disabled = $('#jqxNavigationBar').jqxNavigationBar('disabled');
                 ok(disabled == false, "get disabled test.");

                 // set disabled.
                 $('#jqxNavigationBar').jqxNavigationBar({ disabled: true });
                 var disabled = $('#jqxNavigationBar').jqxNavigationBar('disabled');
                 ok(disabled == true, "set disabled test.");


             });

             test("animationType property test", function () {
                 // get animationType
                 var animationType = $('#jqxNavigationBar').jqxNavigationBar('animationType');
                 ok(animationType == "slide", "get animationType test.");

                 // set animationType.
                 $('#jqxNavigationBar').jqxNavigationBar({ animationType: "fade" });
                 var animationType = $('#jqxNavigationBar').jqxNavigationBar('animationType');
                 ok(animationType == "fade", "set animationType test.");
             });

             test("toggleMode property test", function () {
                 // get toggleMode
                 var toggleMode = $('#jqxNavigationBar').jqxNavigationBar('toggleMode');
                 ok(toggleMode == "click", "get toggleMode test.");

                 // set toggleMode.
                 $('#jqxNavigationBar').jqxNavigationBar({ toggleMode: "dblclick" });
                 var toggleMode = $('#jqxNavigationBar').jqxNavigationBar('toggleMode');
                 ok(toggleMode == "dblclick", "set toggleMode test.");
             });

             test("expandMode property test", function () {
                 // get expandMode
                 var expandMode = $('#jqxNavigationBar').jqxNavigationBar('expandMode');
                 ok(expandMode == "single", "get expandMode test.");

                 // set expandMode.
                 $('#jqxNavigationBar').jqxNavigationBar({ expandMode: "multiple" });
                 var expandMode = $('#jqxNavigationBar').jqxNavigationBar('expandMode');
                 ok(expandMode == "multiple", "set expandMode test.");
             });

             test("sizeMode property test", function () {
                 // get sizeMode
                 var sizeMode = $('#jqxNavigationBar').jqxNavigationBar('sizeMode');
                 ok(sizeMode == "auto", "get sizeMode test.");

                 // set sizeMode.
                 $('#jqxNavigationBar').jqxNavigationBar({ sizeMode: "maxItemHeight" });
                 var sizeMode = $('#jqxNavigationBar').jqxNavigationBar('sizeMode');
                 ok(sizeMode == "maxItemHeight", "set sizeMode test.");
             });

             test("showArrow property test", function () {
                 // get showArrow
                 var showArrow = $('#jqxNavigationBar').jqxNavigationBar('showArrow');
                 ok(showArrow == true, "get showArrow test.");

                 // set showArrow.
                 $('#jqxNavigationBar').jqxNavigationBar({ showArrow: false });
                 var showArrow = $('#jqxNavigationBar').jqxNavigationBar('showArrow');
                 ok(showArrow == false, "set showArrow test.");
             });

             test("arrowPosition property test", function () {
                 // get arrowPosition
                 var arrowPosition = $('#jqxNavigationBar').jqxNavigationBar('arrowPosition');
                 ok(arrowPosition == "right", "get arrowPosition test.");

                 // set arrowPosition.
                 $('#jqxNavigationBar').jqxNavigationBar({ arrowPosition: "left" });
                 var arrowPosition = $('#jqxNavigationBar').jqxNavigationBar('arrowPosition');
                 ok(arrowPosition == "left", "set arrowPosition test.");
             });

             test("expandedIndexes property test", function () {
                 // get expandedIndexes
                 var expandedIndexes = $('#jqxNavigationBar').jqxNavigationBar('expandedIndexes');
                 ok(expandedIndexes != undefined, "get expandedIndexes test.");

                 // set expandedIndexes.
                 $('#jqxNavigationBar').jqxNavigationBar({ expandedIndexes: new Array()});
                 $('#jqxNavigationBar').jqxNavigationBar({ expandedIndexes: [1]});
                 var expandedIndexes = $('#jqxNavigationBar').jqxNavigationBar('expandedIndexes');

                 ok(expandedIndexes.length == 2, "set expandedIndexes test.");
             });

             test("expandedIndex property test", function () {
                 // get expandedIndex
                 var expandedIndex = $('#jqxNavigationBar').jqxNavigationBar('expandedIndex');
                 ok(expandedIndex == 1, "get expandedIndex test.");

                 // set expandedIndex.
                 $('#jqxNavigationBar').jqxNavigationBar({ expandedIndexes: new Array()});
                 $('#jqxNavigationBar').jqxNavigationBar({ expandedIndex: 1 });
                 var expandedIndex = $('#jqxNavigationBar').jqxNavigationBar('expandedIndex');
                 ok(expandedIndex == 1, "set expandedIndex test.");
             });

             test("height property test", function () {
                 // get height
                 var height = $('#jqxNavigationBar').jqxNavigationBar('height');
                 ok(height =="420px", "get height test.");

                 // set height.
                 $('#jqxNavigationBar').jqxNavigationBar({ height: "50px" });
                 var height = $('#jqxNavigationBar').jqxNavigationBar('height');
                 ok(height == "50px", "set height test.");
             });

             test("width property test", function () {
                 // get width
                 var width = $('#jqxNavigationBar').jqxNavigationBar('width');
                 ok(width == "400px", "get width test.");

                 // set width.
                 $('#jqxNavigationBar').jqxNavigationBar({ width: "500px" });
                 var width = $('#jqxNavigationBar').jqxNavigationBar('width');
                 ok(width == "500px", "set width test.");
             });

             module("Module Methods");

             test("expandAt method test", function () {
      		  $('#jqxNavigationBar').jqxNavigationBar('collapseAt', 0);
      		  $('#jqxNavigationBar').jqxNavigationBar('collapseAt', 1);
      		  $('#jqxNavigationBar').jqxNavigationBar('collapseAt', 2);
         	  $('#jqxNavigationBar').jqxNavigationBar('expandAt', 0);
                  var expandedIndex = $('#jqxNavigationBar').jqxNavigationBar('expandedIndex');
                 ok(expandedIndex == 0, "expandAt method test.");

             });

             test("collapseAt method test", function () {
      		  $('#jqxNavigationBar').jqxNavigationBar('expandAt', 0);
      		  $('#jqxNavigationBar').jqxNavigationBar('expandAt', 1);
      		  $('#jqxNavigationBar').jqxNavigationBar('expandAt', 2);
         	  $('#jqxNavigationBar').jqxNavigationBar('collapseAt', 0);
                  var expandedIndex = $('#jqxNavigationBar').jqxNavigationBar('expandedIndex');
                 ok(expandedIndex != 0, "collapseAt method test.");

             });

             module("Module Events");

             test("expandedItem event test", function () {
                 var expandedItem = false;
                 // bind to  expandedItem.
                 $('#jqxNavigationBar').bind('expandedItem', function () {
                     expandedItem = true;
                 });

                 $('#jqxNavigationBar').jqxNavigationBar('expandAt', 1);
                 ok(true == expandedItem, "expandedItem event.");

                 // unbind from expandedItem.
                 $('#jqxNavigationBar').unbind('expandedItem');
             });

             test("collapsedItem event test", function () {
                 var collapsedItem = false;
                 // bind to  collapsedItem.
                 $('#jqxNavigationBar').bind('collapsedItem', function () {
                     collapsedItem = true;
                 });

                $('#jqxNavigationBar').jqxNavigationBar('animationType', 'none');
		$('#jqxNavigationBar').jqxNavigationBar('collapseAt', 1);
		 ok(true == collapsedItem, "collapsedItem event.");

                 // unbind from collapsedItem.
                 $('#jqxNavigationBar').unbind('collapsedItem');
             });
         });
    </script>
</head>
<body>
    <div id='jqxNavigationBar'>
        <div>
        </div>
        <div>
        </div>
       <div>
        </div>
        <div>
        </div>
       <div>
        </div>
        <div>
        </div>
    </div>
    <br />
    <br />
    <div>
        <h1 id="qunit-header">
            QUnit example</h1>
        <h2 id="qunit-banner">
        </h2>
        <div id="qunit-testrunner-toolbar">
        </div>
        <h2 id="qunit-userAgent">
        </h2>
        <ol id="qunit-tests">
        </ol>
        <div id="qunit-fixture">
            test markup, will be hidden</div>
    </div>
</body>
</html>
